<template>
  <div class="detailed-game-card">
    <DefineDetailedTable v-slot="{ participants }">
      <table class="team">
        <thead class="team-header">
          <tr>
            <th class="header-info">
              {{ participants[0].stats.win ? '胜利' : '失败' }}
            </th>
            <th class="header-kda">KDA</th>
            <th class="header-augments">强化</th>
            <th class="header-damage">伤害 & 承受</th>
            <th class="header-gold">金币</th>
            <th class="header-items">物品</th>
          </tr>
        </thead>
        <tbody class="participants">
          <tr
            class="participant"
            :class="{ self: p.isSelf }"
            v-for="p of participants"
            :key="p.identity.player.puuid"
          >
            <td style="min-width: 180px">
              <div class="info">
                <div class="champion">
                  <LcuImage class="champion-icon" :src="championIcon(p.championId)" />
                  <div class="champion-level">{{ p.stats.champLevel }}</div>
                </div>
                <div class="name-and-rank">
                  <div
                    :title="
                      summonerName(
                        p.identity.player.gameName || p.identity.player.summonerName,
                        p.identity.player.tagLine
                      )
                    "
                    class="name"
                    @click="handleToSummoner(p.identity.player.puuid)"
                  >
                    {{
                      summonerName(
                        p.identity.player.gameName || p.identity.player.summonerName,
                        p.identity.player.tagLine
                      )
                    }}{{ p.identity.player.puuid === EMPTY_PUUID ? ' (人机)' : '' }}
                  </div>
                </div>
              </div>
            </td>
            <td style="width: 64px">
              <div class="kda">{{ p.stats.kills }}/{{ p.stats.deaths }}/{{ p.stats.assists }}</div>
            </td>
            <td style="width: 180px">
              <div class="augments">
                <AugmentDisplay :size="24" :augment-id="p.stats.playerAugment1" />
                <AugmentDisplay :size="24" :augment-id="p.stats.playerAugment2" />
                <AugmentDisplay :size="24" :augment-id="p.stats.playerAugment3" />
                <AugmentDisplay :size="24" :augment-id="p.stats.playerAugment4" />
                <AugmentDisplay :size="24" :augment-id="p.stats.playerAugment5" />
                <AugmentDisplay :size="24" :augment-id="p.stats.playerAugment6" />
              </div>
            </td>
            <td style="width: 160px">
              <div class="damage">
                <DamageMetricsBar
                  :baseline-damage="match.recordStats.maxTotalDamageDealt"
                  :total-damage="p.stats.totalDamageDealt"
                  :magic-damage="p.stats.magicDamageDealt"
                  :physical-damage="p.stats.physicalDamageDealt"
                  :true-damage="p.stats.trueDamageDealt"
                />
                <DamageMetricsBar
                  :baseline-damage="match.recordStats.maxTotalDamageTaken"
                  :total-damage="p.stats.totalDamageTaken"
                  :magic-damage="p.stats.magicalDamageTaken"
                  :physical-damage="p.stats.physicalDamageTaken"
                  :true-damage="p.stats.trueDamageTaken"
                />
              </div>
            </td>
            <td class="cell-gold" style="width: 76px">
              <div class="gold" :title="p.stats.goldEarned.toLocaleString()">
                {{ p.stats.goldEarned }} G
              </div>
            </td>
            <td style="width: 180px">
              <div class="items">
                <ItemDisplay :size="20" :item-id="p.stats.item0" />
                <ItemDisplay :size="20" :item-id="p.stats.item1" />
                <ItemDisplay :size="20" :item-id="p.stats.item2" />
                <ItemDisplay :size="20" :item-id="p.stats.item3" />
                <ItemDisplay :size="20" :item-id="p.stats.item4" />
                <ItemDisplay :size="20" :item-id="p.stats.item5" />
                <ItemDisplay :size="20" is-trinket :item-id="p.stats.item6" />
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </DefineDetailedTable>
    <DetailedTable :participants="match.team" />
  </div>
</template>

<script setup lang="ts">
import { EMPTY_PUUID } from '@shared/constants/common'
import LcuImage from '@shared/renderer/components/LcuImage.vue'
import AugmentDisplay from '@shared/renderer/components/widgets/AugmentDisplay.vue'
import ItemDisplay from '@shared/renderer/components/widgets/ItemDisplay.vue'
import { championIcon } from '@shared/renderer/modules/game-data'
import { Game, Participant, ParticipantIdentity } from '@shared/types/lcu/match-history'
import { summonerName } from '@shared/utils/name'
import { createReusableTemplate } from '@vueuse/core'
import { computed } from 'vue'
import { useRouter } from 'vue-router'

import DamageMetricsBar from '../widgets/DamageMetricsBar.vue'

const [DefineDetailedTable, DetailedTable] = createReusableTemplate<{
  participants: ParticipantWithIdentity[]
}>({ inheritAttrs: false })

const props = defineProps<{
  game: Game
  selfPuuid?: string
}>()

type ParticipantWithIdentity = Participant & { isSelf: boolean; identity: ParticipantIdentity }

const match = computed(() => {
  const identities: Record<string, ParticipantIdentity> = {}
  props.game.participantIdentities.forEach((identity) => {
    identities[identity.participantId] = identity
  })

  const all: ParticipantWithIdentity[] = props.game.participants.map((participant) => ({
    ...participant,
    isSelf: identities[participant.participantId].player.puuid === props.selfPuuid,
    identity: identities[participant.participantId]
  }))

  const recordStats = {
    maxTotalDamageDealt: 0,
    maxTotalDamageTaken: 0
  }

  all.forEach((p) => {
    recordStats.maxTotalDamageDealt = Math.max(
      recordStats.maxTotalDamageDealt,
      p.stats.totalDamageDealt
    )
    recordStats.maxTotalDamageTaken = Math.max(
      recordStats.maxTotalDamageTaken,
      p.stats.totalDamageTaken
    )
  })

  return {
    team: all,
    recordStats
  }
})

const router = useRouter()

const handleToSummoner = (puuid: string) => {
  // 人机不跳
  if (!puuid || puuid === EMPTY_PUUID) {
    return
  }
  router.replace(`/match-history/${puuid}`)
}
</script>

<style lang="less" scoped>
.detailed-game-card {
  background-color: rgb(45, 45, 45);
  border-radius: 4px;
  overflow: hidden;
}

table,
th,
td {
  border: none;
}

td:first-child {
  padding-left: 8px;
}

td:last-child {
  padding-right: 8px;
}

table {
  border-spacing: 0;
}

.team-header {
  font-size: 11px;
  height: 30px;

  th {
    font-weight: normal;
  }

  .header-info {
    text-align: left;
    padding-left: 24px;
  }
}

.self {
  background-color: #474747;
}

.info {
  display: flex;
  gap: 4px;
}

.champion {
  position: relative;
  height: 34px;
  width: 34px;
}

.champion-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.champion-level {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 10px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.621);
}

.summoner-spells {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 34px;
  width: 16px;
  gap: 2px;
}

.items {
  display: flex;
  justify-content: center;
  gap: 2px;
}

.cs,
.wards {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.name-and-rank {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 4px;
  flex-grow: 1;
  width: 0;

  .name {
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.3s ease;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

    &:hover {
      color: rgb(167, 167, 255);
    }
  }

  .rank {
    font-size: 10px;
    color: rgb(159, 159, 159);
  }
}

.augments {
  display: flex;
  gap: 2px;
  justify-content: center;

  .augment {
    height: 20px;
    width: 20px;
    box-sizing: border-box;
    background-color: rgb(34, 34, 34);
    border-radius: 2px;
  }

  .augment.prismatic {
    border: 1px solid rgb(175, 141, 255);
  }

  .augment.gold {
    border: 1px solid rgb(255, 183, 0);
  }

  .augment.silver {
    border: 1px solid rgb(247, 247, 247);
  }

  .augment-empty {
    height: 20px;
    width: 20px;
    border-radius: 2px;
    background-color: rgb(34, 34, 34);
  }
}

.kda {
  color: rgb(214, 214, 214);
  font-size: 11px;
  text-align: center;
}

.damage {
  display: flex;
  gap: 8px;
  justify-content: center;
  color: rgb(214, 214, 214);
  font-size: 11px;
}

.gold {
  text-align: center;
  font-size: 11px;
}

.team {
  width: 100%;
}

.participant {
  height: 40px;
}

.divider {
  background-color: rgb(76, 76, 76);
  height: 1px;
  margin: 4px 0px;
}
</style>
